@reference "tailwindcss";

.vuefinder__about-modal__content {
  @apply select-none sm:items-start;
}

.vuefinder__about-modal__main {
  @apply mt-3 w-full sm:mt-0 sm:text-left;
}

.vuefinder__about-modal__tabs {
  @apply flex gap-1 overflow-auto;
}

.vuefinder__about-modal__tab {
  @apply cursor-pointer px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 select-none;
}

.vuefinder__about-modal__tab--active {
  @apply cursor-default border-b border-(--vf-accent-primary)/40 bg-transparent text-(--vf-text-primary);
}

.vuefinder__about-modal__tab--inactive {
  @apply border-b border-transparent bg-transparent text-(--vf-text-secondary) hover:border-(--vf-border-primary) hover:text-(--vf-text-primary);
}

.vuefinder__about-modal__tab--inactive:hover {
  @apply text-(--vf-text-primary);
}

.vuefinder__about-modal__tab-content {
  @apply mt-4;
}

.vuefinder__about-modal__lead {
  @apply m-1 text-sm text-(--vf-text-secondary);
}

.vuefinder__about-modal__links {
  @apply mt-3 grid grid-cols-2 gap-2;
}

.vuefinder__about-modal__link-btn {
  @apply inline-flex items-center justify-center rounded border border-(--vf-border-primary) bg-(--vf-bg-hover) px-2.5 py-1.5 text-xs text-(--vf-text-primary) transition-colors hover:border-(--vf-accent-primary)/40 hover:bg-(--vf-bg-primary) sm:text-sm;
}

.vuefinder__about-modal__description {
  @apply m-1 text-sm text-(--vf-text-secondary);
}

.vuefinder__about-modal__link {
  @apply mt-2 block text-sm text-(--vf-accent-primary);
}

.vuefinder__about-modal__social {
  @apply mt-3 text-sm;
}

.vuefinder__about-modal__social .vuefinder__about-modal__link {
  @apply mt-0 inline text-(--vf-accent-primary);
}

.vuefinder__about-modal__separator {
  @apply mx-2 text-(--vf-text-secondary);
}

.vuefinder__about-modal__meta {
  @apply mt-3 grid grid-cols-2 gap-2;
}

.vuefinder__about-modal__meta-item {
  @apply flex items-center justify-between rounded border border-(--vf-border-primary) bg-(--vf-bg-primary) px-2.5 py-1.5 text-xs sm:text-sm;
}

.vuefinder__about-modal__meta-label {
  @apply text-sm text-(--vf-text-secondary);
}

.vuefinder__about-modal__meta-value {
  @apply text-sm font-medium text-(--vf-text-primary);
}

.vuefinder__about-modal__settings {
  @apply mt-3 max-h-[35vh] overflow-y-auto text-left;
}

.vuefinder__about-modal__settings__fieldset {
  @apply border-0 bg-(--vf-bg-primary) p-2 sm:p-3;
}

.vuefinder__about-modal__settings__section-title {
  @apply mt-4 mb-1 box-border text-xs tracking-wide text-(--vf-text-secondary) uppercase;
}

.vuefinder__about-modal__setting {
  @apply relative grid items-center gap-x-3 gap-y-0.5 border-b-0 py-1.5;
  grid-template-columns: auto 1fr;
}

.vuefinder__about-modal__setting--flex {
  @apply flex;
}

.vuefinder__about-modal__setting:last-child {
}

.vuefinder__about-modal__setting-input {
  @apply box-border flex h-5 flex-1 items-center text-(--vf-text-primary);
  justify-content: flex-end;
}

.vuefinder__about-modal__setting-label {
  @apply flex flex-1 items-center justify-between gap-3 text-sm text-(--vf-text-primary);
}

.vuefinder__about-modal__label {
  @apply flex w-full text-sm text-(--vf-text-primary);
}

.vuefinder__about-modal__checkbox {
  @apply relative h-3.5 w-3.5 cursor-pointer appearance-none rounded border border-(--vf-border-primary) bg-(--vf-bg-primary);
  accent-color: var(--vf-accent-primary);
}

.vuefinder__about-modal__checkbox:checked {
  @apply border-(--vf-accent-primary) bg-[length:10px_10px] bg-center bg-no-repeat;
  background-color: var(--vf-accent-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M8.5 2.5L4 7L1.5 4.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.vuefinder__about-modal__checkbox:focus {
  @apply opacity-100 outline-none;
  box-shadow: 0 0 0 2px var(--vf-accent-primary);
}

.vuefinder__about-modal__checkbox:hover:not(:checked) {
  @apply border-(--vf-accent-primary) opacity-60;
  border-color: var(--vf-accent-primary);
}

.vuefinder__about-modal__select {
  @apply shrink-0 rounded border border-(--vf-border-primary) bg-(--vf-bg-primary) text-sm text-(--vf-text-primary) focus:ring-1 focus:ring-(--vf-border-primary) focus:outline-none sm:w-2/3;
  @apply appearance-none bg-no-repeat p-1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
}
@media (min-width: 640px) {
  .vuefinder__about-modal__setting {
    grid-template-columns: 220px 1fr;
  }
  .vuefinder__about-modal__setting {
    @apply py-1.5;
  }
  .vuefinder__about-modal__setting-input {
    justify-content: flex-end;
  }
}

.vuefinder__about-modal__shortcuts {
  @apply max-h-[35vh] w-full overflow-y-auto;
}

.vuefinder__about-modal__shortcut {
  @apply flex items-center justify-between border-b border-(--vf-border-primary) py-1.5 text-sm text-(--vf-text-secondary);
}

.vuefinder__about-modal__shortcut:last-child {
  @apply border-b-0;
}

.vuefinder__about-modal__shortcut kbd {
  @apply rounded border border-(--vf-border-primary) bg-(--vf-bg-hover) px-1.5 py-0.5 font-mono text-xs text-(--vf-text-primary);
}
